<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Walter JS Examples</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/cerulean/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" />

      <style>
          #myCanvas {
              margin-left: auto;
              margin-right: auto;
              display: block;
              background-color: lightyellow;
          }
          #myAudio {
              margin-left: auto;
              margin-right: auto;
              display: block;
          }
          #controls {
              text-align: center;
          }
          #start_button, #stop_button {
              font-size: 16pt;
          }
          #msg {
              text-align: center;
          }
      </style>
  </head>

  <body>

    <div class="container">

    <h1>
    <a href="/">JavaScript Example for Web Audio API</a>
    </h1>
    <form  id="testForm">
        <div class="row">
            <div class="col-lg-10">
                <table class="table">
                    <tr>
                        <td>Source Node</td>
                        <td>Effect Node</td>
                        <td>Destination Node</td>
                    </tr>
                    <tr>
                        <td>AudioStreamSourceNode</td>
                        <td>JavaScriptNode</td>
                        <td>Destination Node</td>
                    </tr>
                </table>

            </div>
        </div>
        <div class="row">
            <div class="col-lg-2">
                <button class="btn btn-success" id="startButton">Start</button>
                <button class="btn btn-failure" id="stopButton">Stop</button>
            </div>
            <div class="col-lg-8">
                <audio id="myAudio" autoplay controls></audio>

            </div>
        </div>
        <div class="row">
            <div class="col-lg-2">
                &nbsp;
            </div>
            <div class="col-lg-8">
                <canvas id="myCanvas" width="512" height="256" ></canvas>
            </div>
        </div>
      </form>
    </div>
    <p id="msg"></p>
  </body>
  <script src="example2.js"></script>
  <script>
  
      
      window.onload = function init() {
        var rtcApp = new RtcApp();
        rtcApp.init();
        //why call rtcApp.startMedia(e) directly cause the this variable error in function startMedia
        document.getElementById("startButton").addEventListener("click", e => rtcApp.startMedia(e));
        document.getElementById("stopButton").addEventListener("click", e => rtcApp.stopMedia(e));

      }
  
  </script>
</html>
